<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #gamelist {
            width: 500px;
            padding: 20px;
            border: 1px solid #e3e3e3;
            font-size: 14px;
            overflow: hidden;
            color: #333;
            /*display: none;*/
        }
        
        #gamelist li {
            float: left;
            list-style: none;
            cursor: pointer;
            margin: 3px 5px;
            padding: 3px 5px;
            border: 1px solid transparent;
        }
        
        #title {
            width: 502px;
            padding: 0 20px;
            font-size: 16px;
            cursor: pointer;
            color: #fff;
            margin-top: 20px;
            height: 42px;
            line-height: 42px;
            background-color: #f99;
            position: relative;
        }
        
        .show .arrow {
            transform: rotate(540deg);
        }
        
        .arrow {
            transition: all .5s;
            position: absolute;
            right: 9px;
            top: 35%;
        }
        
        .wrap {
            width: 600px;
            margin: 100px auto;
        }
        
        #gamelist .selected {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p>
            已选择：<span id="selected">请至少选择一款游戏</span>
        </p>
        <h2 id="title" class="show">
            游戏列表
            <img src="arrow.png" class="arrow" alt="">
        </h2>
        <ul id="gamelist">
            <li>超级玛丽</li>
            <li>魂斗罗</li>
            <li>雪人兄弟</li>
            <li>马戏团</li>
            <li>坦克大战</li>
            <li>黎明之海</li>
            <li>荒野乱斗</li>
            <li>第九大陆</li>
            <li>火影忍者</li>
            <li>糖豆人</li>
            <li>热血传奇怀旧版</li>
            <li>龙之谷2</li>
            <li>升腾：无限领域</li>
            <li>黑神话：悟空</li>
            <li>动物派对</li>
        </ul>
    </div>


    <script src='jquery.min.js'></script>
    <script>
        let liList = $("#gamelist li");
        $("#title").click(function() {
            $("#gamelist").slideToggle()
            $(this).toggleClass("show")
        })
        $("#gamelist li").click(function() {
            $(this).toggleClass("selected");
            let result = [];

            liList.each(function() {
                if ($(this).hasClass("selected")) {
                    result.push($(this).html())
                }
            })
            if (result.length) {
                $("#selected").html(String(result))
            } else {
                $("#selected").html("请输入选择一款游戏")
            }
        })
        $(liList[0]).fadeOut()
    </script>
</body>

</html>